<template>
  <div class="app">
    <div class="left">
      <div class="no-recent" v-if="recentList.length == 0">暂无最近联系人</div>
      <div class="recent-list" v-if="recentList.length > 0">
        <template v-for="item in recentList" :key="item.recent_id">
          <div class="recent-item" @click="nowUser = item.user_to">
            <div class="recent-head">
              <img
                :src="item.user_to.user_head"
                @error="item.user_to.user_head = noHeadImage"
              />
            </div>
            <div class="recent-info">
              <div class="recent-user">
                <span class="name">{{ item.user_to.user_name }}</span>
                <span class="time">{{ friendlyTime(item.recent_time) }}</span>
              </div>
              <div class="recent-content">
                <span class="content">{{
                  item.recent_content || "暂无消息记录"
                }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="right">
      <div class="no-recent" v-if="!nowUser">
        <i class="iconfont icon-changyongtubiao-mianxing-52"></i>
      </div>
      <div class="chat-box" v-if="nowUser">
        <div class="message-list"></div>
        <div class="message-form">
          <textarea
            v-model="message"
            class="form"
            @keydown="messageKeyDown"
            placeholder="对方正期待你的消息,说点什么吧..."
          ></textarea>
          <el-button
          class="btn-comment"
          type="success"
          size="mini"
          plain
          @click="sendMessage"
          >发送</el-button
        >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recentList: [],
      page: 1,
      per_page: 50,
      user_id: false,
      noHeadImage: require("@/asset/img/head.jpg"),
      nowUser: false,
      message: "",
    };
  },
  watch: {
    "$store.state.personalMessageList": {
      handler(personalMessageList) {
        console.log(personalMessageList);
      },
      immediate: true,
      deep: true,
    },
    "$store.state.nowApp.data": {
      handler(user_id) {
        if (this.$store.state.nowApp.key === "chat_recent" && user_id) {
          this.user_id = user_id;
          this.chatToUser();
        }
      },
      immediate: true,
      deep: true,
    },
    nowUser() {
      this.$emit("api", {
        event: "setWindowTitle",
        title: "与 " + this.nowUser.user_name + " 聊天中",
      });
      this.getMessageList();
    },
  },
  created() {
    this.loadRecentList();
  },
  methods: {
    getMessageList() {},
    chatToUser() {
      this.request({
        url: "message/addRecent",
        method: "POST",
        data: {
          user_id: this.user_id,
        },
        success: () => {},
        final: () => {
          this.loadRecentList();
        },
      });
    },
    friendlyTime(time) {
      console.log(time);
      return this.tool.friendlyTime(time);
    },
    loadRecentList() {
      this.request({
        url: "message/recent",
        method: "POST",
        data: {
          page: this.page,
          per_page: this.per_page,
        },
        success: (res) => {
          if (this.page == 1) {
            this.recentList = res.data;
          } else {
            this.recentList.concat(res.data);
          }
        },
      });
    },
    messageKeyDown(e) {
      switch (e.key) {
        case "Enter":
          e.preventDefault();
          this.sendMessage(this.message);
          break;
      }
    },
    /**
     * 发送消息
     */
    sendMessage() {
      if (!this.message) {
        return;
      }
      let sendData = {
        to: this.nowUser.user_id,
        type: "text",
        msg: this.message,
      };
      this.message = "";
      this.request({
        url: "message/send",
        method: "POST",
        data: sendData,
        success: () => {},
        error: () => { 
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  display: flex;
  color: #333;
  text-shadow: none;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  .no-recent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #999;
    .iconfont {
      font-size: 100px;
      color: #ddd;
    }
  }
  .left {
    width: 25%;
    min-width: 200px;
    max-width: 300px;
    height: 100%;
    background: #fff;
    border-right: 1px solid #f5f5f5;
    position: relative;
    display: flex;
    overflow: hidden;
    .recent-list {
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 100%;
      .recent-item {
        padding: 10px;
        transition: all 0.5s;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        .recent-head {
          width: 50px;
          height: 50px;
          overflow: hidden;
          border-radius: 8px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .recent-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          .recent-user {
            display: flex;
            flex-direction: row;
            align-items: center;
            .name {
              font-size: 16px;
              flex: 1;
              width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .time {
              font-size: 12px;
              color: #ccc;
            }
          }
          .recent-content {
            margin-top: 10px;
            font-size: 12px;
            color: #aaa;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .recent-item:hover {
        background-color: #f5f5f5;
      }
    }
  }
  .left:hover {
    overflow-y: auto;
  }

  .right {
    height: 100%;
    flex: 1;
    background: #fff;
    position: relative;
    .chat-box {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      .message-list {
        flex: 1;
      }
      .message-form {
        height: 80px;
        border-top: 1px solid #eee;
        padding: 10px;
        textarea {
          outline: none;
          resize: none;
          overflow: hidden;
          border: none;
          width: 100%;
          height: 70%;
          font-size: 14px;
        }
        .btn-comment {
      width: 90px;
      height: 30px;
      position: absolute;
      right: 10px;
      bottom: 3px;
    }
      }
    }
  }
}
</style>